<template>
  <div class="pageWrap">
    <header class="centerLR">
      <h2>中汽创智可视化配置</h2>
      <div class="formSearch">
        <Button type="primary" ghost @click="addItem($event, 'add')" class="md-add-jh">添加配置</Button>
        <Divider type="vertical" />
        <Checkbox v-model="queryObj.isMe" class="gap" @on-change="queryList()">由我创建</Checkbox>
        <Input
          v-model.trim="queryObj.name"
          class="gap input"
          clearable
          placeholder="配置名称"
          @on-change="queryListD"
        />
        <Button type="primary" ghost class="gap button" @click="queryList('refresh')"
          ><i class="el-icon-refresh-right"
        /></Button>
      </div>
    </header>
    <content class="flexHeight">
      <Table :columns="columns" :data="datasource" class="growBox mt20"></Table>
      <Page
        class="mt16"
        :total="total"
        :current="queryObj.pageIndex"
        :page-size="queryObj.pageSize"
        show-elevator
        show-total
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </content>
    <AddModal ref="addmodal" @refreshList="queryList"></AddModal>
    <show-tree-detail ref="treeDetail"></show-tree-detail>
  </div>
</template>
<script>
import { setDefaultHeight, handlerAvailable } from '@/view/experimentalScene/skillTree/skillCommon';
import $ from 'jquery';
import usally from '@/mixin/usally';
import encryption from '@/libs/encryption.js';
import AddModal from './addModal.vue';
import { throttle, debounce } from '@/libs/utils';
export default {
  name: 'chinaAuto',
  components: { AddModal },
  mixins: [usally],
  data() {
    let September = sessionStorage.getItem('November');
    September = JSON.parse(encryption.SelfUseDecrypt(September));
    return {
      USER_ID: September.userId,
      USER_Name: September.nickname,
      isRootDesigner: September.isRootDesigner,
      defaultPagesize: setDefaultHeight(),
      //列表查询对象
      queryObj: {
        pageIndex: 1,
        pageSize: this.defaultPagesize,
        name: '',
        available: -1,
        isMe: false
      },
      currentObj: {},
      columns: [
        {
          title: '名称',
          key: 'name',
          align: 'center',
          placement: 'top-left',
          width: 100,
          render: (h, params) => {
            return h(
              'Tooltip',
              {
                props: {
                  placement: 'top-start',
                  transfer: true,
                  maxWidth: 200,
                  content: params.row.name
                }
              },
              [
                h(
                  'a',
                  {
                    style: {
                      marginRight: '5px',
                      color: '#1563C2 ',
                      width: '240px'
                    },
                    attrs: {
                      class: 'text-ellipsis'
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: 'skillTreeDetail',
                          query: {
                            name: params.row.name,
                            id: params.row.id
                          }
                        });
                      }
                    }
                  },
                  params.row.name
                )
              ]
            );
          }
        },
        {
          title: '描述',
          key: 'description',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 250
        },
        {
          title: '创建者',
          key: 'creatorName',
          align: 'center',
          tooltip: true,
          width: 100
        },
        {
          title: '创建时间',
          key: 'createTime'
        },
        {
          title: '操作',
          placement: 'top-right',
          action: true,
          render: (h, params) => {
            return h('div', {}, [
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  attrs: {
                    title: '可视化'
                  },
                  style: {
                    background: 'none',
                    border: 'none',
                    boxShadow: 'none'
                  },
                  on: {
                    click: () => {
                      this.showItem(params);
                    }
                  }
                },
                [
                  h('img', {
                    attrs: {
                      src: require('@/assets/project/magnifier-h.png')
                    },
                    style: {
                      cursor: 'pointer',
                      'margin-right': '5px',
                      'vertical-align': 'middle',
                      display: 'inline-block',
                      marginBottom: '4px'
                    }
                  })
                ]
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small',
                    disabled: !this.isRootDesigner && params.row.creator != this.USER_ID
                  },
                  attrs: {
                    title: '修改'
                  },
                  style: {
                    background: 'none',
                    border: 'none',
                    boxShadow: 'none'
                  },
                  on: {
                    click: () => {
                      this.$refs.addmodal.open(params.row);
                    }
                  }
                },
                [
                  h('img', {
                    attrs: {
                      src: !(!this.isRootDesigner && params.row.creator != this.USER_ID)
                        ? require('@/assets/project/modifys-h.png')
                        : require('@/assets/project/modifys.png')
                    },
                    style: {
                      cursor: 'pointer',
                      'margin-right': '5px',
                      'vertical-align': 'middle',
                      display: 'inline-block',
                      marginBottom: '4px'
                    }
                  })
                ]
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    'ok-text': '确定',
                    'cancel-text': '取消',
                    type: 'error',
                    size: 'large',
                    title: '你确定要删除吗?',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.delItem(params.row.id);
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'text',
                        size: 'small',
                        disabled: !this.isRootDesigner && params.row.creator != this.USER_ID
                      },
                      attrs: {
                        title: '删除'
                      },
                      style: {
                        background: 'none',
                        border: 'none',
                        boxShadow: 'none'
                      }
                    },
                    [
                      h('img', {
                        attrs: {
                          src: !(!this.isRootDesigner && params.row.creator != this.USER_ID)
                            ? require('@/assets/project/delNote-h.png')
                            : require('@/assets/project/delNote-d.png')
                        },
                        style: {
                          cursor: 'pointer',
                          'margin-right': '5px',
                          'vertical-align': 'middle',
                          display: 'inline-block',
                          marginBottom: '4px'
                        }
                      })
                    ]
                  )
                ]
              )
            ]);
          }
        }
      ],
      datasource: [{ name: '--' }],
      total: 0
    };
  },
  mounted() {
    window.onresize = () => {
      this.resizeThrottle();
    };
    this.queryObj.pageSize = setDefaultHeight();
    this.queryList();
  },
  methods: {
    queryListD: debounce(function() {
      this.queryList();
    }, 500),
    resizeThrottle: throttle(function() {
      this.defaultPagesize = setDefaultHeight();
      this.queryObj.pageSize = this.defaultPagesize;
      this.queryList();
    }, 1000),
    addItem() {
      this.$refs.addmodal.open();
    },
    initQuery() {
      this.queryObj = {
        pageIndex: 1,
        pageSize: this.defaultPagesize,
        name: '',
        available: -1,
        isMe: false
      };
    },
    queryList(type) {
      if (type == 'refresh') {
        this.initQuery();
      }
      const params = { ...this.queryObj };
      if (params.isMe) {
        params.creator = this.USER_ID;
      }
      delete params.isMe;
      if (params.available == -1) {
        delete params.available;
      }
      if (!params.name) {
        delete params.name;
      }
      // querySkill(params).then(data=>{
      //     if(data.code===1){
      //         this.datasource = data.data.items
      //         this.total = data.data.total
      //     }else{
      //         this.$Message.error(data.message)
      //     }
      // })
    },
    changePage(page) {
      this.queryObj.pageIndex = page;
      this.queryList();
    },
    changeSize(size) {
      this.queryObj.pageSize = size;
      this.queryList();
    },
    showItem(params) {
      window.openTrain(`./chinaAuto?id=${params.row.id}`, '_blank');
    },
    delItem(id) {
      delSkill(id).then((res) => {
        if (res.code == 1) {
          this.$Message.info('删除成功!');
          this.queryList();
        } else {
          this.$Message.error(res.message);
        }
      });
    }
  }
};
</script>
<style></style>
